import React from 'react';
import { WingBlank, Tabs } from 'antd-mobile';
import styles from './VipRights.less';
const TabPane = Tabs.TabPane

class CardSelector extends React.Component {
  constructor(props) {
    super(props)
  
    this.state = {
      vipType: props.vipType,
      vipRights: props.vipRights,
      index: 0,
      rightInfo: props.vipRights[0].vipTypes[0].cardRights
    }
  }

  onChange = async (key) => {
    let {vipRights} = this.state
    key = Number(key)
    this.setState({
      index: key,
      rightInfo: vipRights[0].vipTypes[key].cardRights
    })
  }
  
  /* 会员卡 */
   vipCard = (rights) => {
     return (
       <div className={styles['right_vipCard']}>
           <div className={styles['rName']}>权益说明： </div>
           <div className={styles['rInfo']}>
             <div style={{whiteSpace: 'pre-line', lineHeight: '.531401rem'}}>{rights}</div>
           </div>
       </div>
     )
   }
  /* 折扣卡 */
  discount = (rights) => {
    return (
      <div className={styles['right_vipCard']}>
           <div className={styles['rName']}>权益说明： </div>
           <div className={styles['rInfo']}>
             <div style={{whiteSpace: 'pre-line', lineHeight: '.531401rem'}}>{rights}</div>
           </div>
       </div>
    )
  }
  /* 微信会员 */
  wechat = (rights) => {
    return (
      <div className={styles['right_vipCard']}>
           <div className={styles['rName']}>权益说明： </div>
           <div className={styles['rInfo']}>
             <div style={{whiteSpace: 'pre-line', lineHeight: '.531401rem'}}>{rights}</div>
           </div>
       </div>
    )
  }
  render() {
    const {vipType, vipRights, index, rightInfo} = this.state
    return (
       <div className={styles['container']}>
          <div className={styles['header']}>
             <img src={vipRights[0].vipTypes[parseInt(index)].cardImageUrl ? vipRights[0].vipTypes[parseInt(index)].cardImageUrl : require('../../assets/new/card2.png')} alt="headerimg"/>
          </div>
          <Tabs defaultActiveKey="0" onChange={this.onChange}>
          <TabPane tab={vipType[0].type_name} key="0">
            {this.vipCard(rightInfo)}
          </TabPane>
          <TabPane tab={vipType[2].type_name} key="1">
            {this.discount(rightInfo)}  
          </TabPane>
          <TabPane tab={vipType[1].type_name} key="2">
            {this.wechat(rightInfo)}
          </TabPane>
        </Tabs>
       </div>
    );
  }
}

CardSelector.propTypes = {
  vipTypes: React.PropTypes.array,
  vipRights: React.PropTypes.array,
};

export default CardSelector;
